<template>
  <div style="padding: 10px; background-color: #f9f9f9; min-height: 100vh">
    <!--功能区域-->
    <div style="margin: 10px 0; display: flex; justify-content: space-between; align-items: center">
      <el-button type="primary" @click="add" class="styled-button">客人登记</el-button>
      <el-button type="danger" style="margin-left: 5px" size="medium" @click="batchDelete" class="styled-button">批量删除</el-button>
    </div>
    <!--搜索区域-->
    <div style="margin: 10px 0; display: flex; align-items: center;">
      <!-- 可以保留搜索功能，如果需要 -->
      <!-- <el-input v-model="roomNameQuery" placeholder="请输入房间名进行查询" style="width: 20%" clearable class="styled-input"></el-input> -->
      <!-- <el-button type="primary" style="margin-left: 5px" size="medium" @click="searchByRoomName" class="styled-button">查询</el-button> -->
    </div>
    <!--表格区域-->
    <el-table :data="tableData" border style="width: 100%; margin-top: 20px" @selection-change="handleSelectionChange" class="styled-table">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID"/>
      <el-table-column prop="name" label="顾客名"/>
      <el-table-column prop="personId" label="身份证号码"/>
      <el-table-column prop="roomNumber" label="房间号"/>
      <el-table-column prop="phoneNumber" label="电话号码"/>
      <el-table-column prop="checkInDate" label="入住日期">
        <template #default="scope">
          {{ scope.row.checkInDate ? scope.row.checkInDate.split('T')[0] : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="checkOutDate" label="退房日期">
        <template #default="scope">
          {{ scope.row.checkOutDate ? scope.row.checkOutDate.split('T')[0] : '' }}
        </template>
      </el-table-column>
    </el-table>

    <!--底部分页-->
    <div style="margin: 10px 0; display: flex; justify-content: center">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          class="styled-pagination"
      />
    </div>

    <!--点击新增，弹出的对话框-->
    <el-dialog
        v-model="dialogVisible"
        title="客人登记"
        width="30%"
        class="styled-dialog"
    >
      <el-form :model="form" label-width="120px" class="styled-form">
        <el-form-item label="顾客名称">
          <el-input v-model="form.name" style="width: 80%" class="styled-input"/>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.personId" style="width: 80%" class="styled-input"/>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="form.roomNumber" style="width: 80%" class="styled-input"/>
        </el-form-item>
        <el-form-item label="电话号码">
          <el-input v-model="form.phoneNumber" style="width: 80%" class="styled-input"/>
        </el-form-item>
        <el-form-item label="入住日期">
          <el-date-picker v-model="form.checkInDate" class="styled-input"/>
        </el-form-item>
        <el-form-item label="退房日期">
          <el-date-picker v-model="form.checkOutDate" class="styled-input"/>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false" class="styled-button">取消</el-button>
          <el-button type="primary" @click="save" class="styled-button">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "CheckIn",
  components: {},
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
      roomNameQuery: '',
      selectedIds: []
    }
  },
  methods: {
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleDelete(id) {
      request.delete("/admin/deleteCheckInGuest/" + id).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '删除成功'
          });
        } else {
          this.$message({
            type: "error",
            message: "删除失败"
          });
        }
        this.load();
      });
    },
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    add() {
      this.dialogVisible = true;
      this.form = {};
    },
    save() {
      if (this.form.id) {
        request.put("/admin/updateCheckInGuest", this.form).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "更新成功"
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
          this.load();
          this.dialogVisible = false;
        });
      } else {
        request.post("/admin/addCheckInGuest", this.form).then(res => {
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "新增成功"
            });
          } else {
            this.$message({
              type: "error",
              message: res.msg
            });
          }
          this.load();
          this.dialogVisible = false;
        });
      }
    },
    load() {
      request.get("/admin/getCheckInGuestList", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    batchDelete() {
      if (this.selectedIds.length === 0) {
        this.$message({
          type: 'warning',
          message: '请先选择要删除的行'
        });
        return;
      }
      request.delete("/admin/deleteCheckInGuestsByIds", {
        data: this.selectedIds
      }).then(res => {
        if (res.code === '0') {
          this.$message({
            type: "success",
            message: '批量删除成功'
          });
          this.load();
          this.selectedIds = [];
        } else {
          this.$message({
            type: "error",
            message: "批量删除失败"
          });
        }
      });
    },
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    }
  },
  created() {
    this.load();
  }
}
</script>

<style scoped>
.styled-button {
  background-color: #ffaa50; /* 橘色背景 */
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  transition: background-color 0.3s, transform 0.3s;
  cursor: pointer;
  font-weight: bold;
}

.styled-button:hover {
  background-color: #ffcc80; /* 鼠标悬停时的背景颜色 */
  transform: scale(1.05);
}

.styled-button:active {
  transform: scale(0.95);
}

.styled-input {
  border-radius: 20px; /* 输入框圆角 */
  border: 1px solid #ffaa50; /* 输入框边框颜色 */
  padding: 12px 20px;
  transition: border-color 0.3s;
}

.styled-input:focus {
  border-color: #ffaa50; /* 输入框聚焦时的边框颜色 */
}

.styled-table {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.3s;
}

.styled-table:hover {
  transform: scale(1.05);
}

.styled-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.styled-dialog {
  background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  transition: transform 0.3s;
}

.styled-dialog:hover {
  transform: scale(1.05);
}

.styled-form {
  padding: 20px;
  border-radius: 12px;
  background-color: #f9f9f9;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}
</style>